<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
         <link href="css/ol.css" rel="stylesheet" />
         
		<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			.mui-btn {
				padding: 10px;
			}
			#map {
	width: 100%;
	position: fixed;
	top: 45px;
	z-index: 10;
	bottom: 48px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}

#footer {
    width: 100%;
    position: fixed;
    top: 0;
   background: rgba(52, 52, 52, 0.5);
    color: #fff;
    font-size: 12px;
    box-sizing: border-box;
    z-index: 9999;
    top: auto!important;
    bottom: 0;
    height: 48px;
}
.icon_style{
	display: flex;
	justify-content: center;
}

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<button id='setting' class=" mui-pull-left mui-btn-link">设置</button>
			<h1 class="mui-title">地理信息系统</h1>
			<span class="mui-icon mui-icon-paperplane mui-pull-right" onclick="userLocation();"></span>
		</header>
		<div class="mui-content" >
		<div id='map' >地图加载中</div>
		</div>
	<div id="footer" >
<div class="mui-row" style="margin-top: 10px;">
	<div class="mui-col-sm-3  mui-col-xs-3">
		<span class="mui-icon mui-icon-phone icon_style"></span>
		</div>
		<div class="mui-col-sm-3 mui-col-xs-3">
	<span class="mui-icon mui-icon mui-icon-email icon_style"></span>
		</div>
			<div class="mui-col-sm-3 mui-col-xs-3">
		<span class="mui-icon mui-icon mui-icon-chatbubble icon_style"></span>
		</div>
		<div class="mui-col-sm-3 mui-col-xs-3">
		<span class="mui-icon mui-icon mui-icon-camera icon_style" ></span>
		</div>
		
</div>
</div>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<!--
        	作者：1034023223@qq.com
        	时间：2017-09-21
        	描述：引入openlayers
        -->
		<script src="js/ol-debug.js"></script>
		<script>
			var backButtonPress=0;
		mui.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};	
		var ws=null,wo=null;
var em=null,map=null,pcenter=null;
// H5 plus事件处理
function plusReady(){
	if(!em||ws){return};
	// 获取窗口对象
	ws=plus.webview.currentWebview();
	wo=ws.opener();
	//getPos();//获取地理位置信息
	//高德地图坐标为(116.3974357341,39.9085574220), 百度地图坐标为(116.3975,39.9074)
	//pcenter = new plus.maps.Point(116.3975,39.9074);
	setTimeout(function(){
		map=new plus.maps.Map("map");
	//	map.centerAndZoom(pcenter,12);
		createMarker();
		// 创建子窗口
		createSubview();
		map.showUserLocation( true );
	map.getUserLocation(function(state,pos){
		if(0==state){
			map.centerAndZoom(pos,13);
		}
	});
	},300);
	// 显示页面并关闭等待框
    ws.show("pop-in");
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	window.plus&&plusReady();
},false);
function userLocation(){
	map.showUserLocation( true );
	map.getUserLocation(function(state,pos){
		if(0==state){
			map.setCenter(pos);
		}
	});
}
function createMarker(){
	//高德地图坐标为(116.3406445236,39.9630878208), 百度地图坐标为(116.347292,39.968716
	var marker=new plus.maps.Marker(new plus.maps.Point(116.347292,39.968716));
	//marker.setIcon("/logo.png");
	//marker.setLabel("HBuilder");
	//var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
	//marker.setBubble(bubble);
	map.addOverlay(marker);
}
function createSubview(){
	// 创建加载内容窗口
	var topoffset='44px';
	if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
		topoffset=(Math.round(plus.navigator.getStatusbarHeight())+44)+'px';
	}
	//var wsub=plus.webview.create('maps_map_sub.html','sub',{top:topoffset,height:'60px',position:'absolute',scrollIndicator:'none',background:'transparent'});
	//ws.append(wsub);
}
function resetMap(){
	//map.centerAndZoom(pcenter,12);
	map.reset();
}


function geoInf( position ) {
	var str = "";
	str += "地址："+position.addresses+"\n";//获取地址信息
	str += "坐标类型："+position.coordsType+"\n";
	var timeflag = position.timestamp;//获取到地理位置信息的时间戳；一个毫秒数；
	str += "时间戳："+timeflag+"\n";
	var codns = position.coords;//获取地理坐标信息；
	var lat = codns.latitude;//获取到当前位置的纬度；
	str += "纬度："+lat+"\n";
	var longt = codns.longitude;//获取到当前位置的经度
	str += "经度："+longt+"\n";
	var alt = codns.altitude;//获取到当前位置的海拔信息；
	str += "海拔："+alt+"\n";
	var accu = codns.accuracy;//地理坐标信息精确度信息；
	str += "精确度："+accu+"\n";
	var altAcc = codns.altitudeAccuracy;//获取海拔信息的精确度；
	str += "海拔精确度："+altAcc+"\n";
	var head = codns.heading;//获取设备的移动方向；
	str += "移动方向："+head+"\n";
	var sped = codns.speed;//获取设备的移动速度；
	str += "移动速度："+sped;
	console.log(JSON.stringify(position));
	outLine( str );
}
//获取设备定位信息
	function getPos() {
	plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
		outSet( "获取位置信息失败："+e.message );
	}, {geocode:false} );
}	
		
		
		</script>
	</body>

</html>